<template>
    <div>
        <!-- 父组件通过props给子组件传值演示 -->
        <h3>我是一个头部组件--{{title}}---{{msg}}</h3>
        <button @click="run(123)">Header.vue执行父组件Home.vue的run方法</button>
        <button @click="getParent()">Header.vue获取父组件的数据和方法</button>

        <!-- 子组件主动获取父组件的数据和方法演示 -->
        <br><br>
        <button @click="getParentData()">Header.vue获取父组件的数据</button>
        <button @click="getParentMethod()">Header.vue获取父组件的方法</button>
    </div>
</template>

<script>
export default {
    data(){
        return{
            msg:'Header组件的msg'
        }
    },
    methods:{
        getParent(){
            // alert(this.title); // 父子组件参数传递的那个title,即下面props里的第一个title
            alert(this.home.title); // 父组件home示例的title
            this.home.run();
        },
        runInHeader(){
            alert('我是子组件的runInHeader方法');
        },
        getParentData(){
            alert(this.$parent.msg);
        },
        getParentMethod(){
            this.$parent.run();
        }
    },
    props:['title','run','home']
}
</script>


<style>

</style>


